<#import "/macro.ftl" as m>
<@m.page_header title='后台' />
<script type="text/javascript" src="/assets/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/assets/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/assets/ueditor/lang/zh-cn/zh-cn.js"></script>
<div id="page-content-wrapper">

    <div id="page-title">
        <h3>
        <#if type>修改产品类别<#else>添加产品类别</#if>
        </h3>
    </div>

    <div class="pad10A">
    <#if type>
    <form id="demo-form1" action="/product/type/update/${type.id}" class="col-md-12" method="POST">
    <#else>
    <form id="demo-form1" action="update/0" class="col-md-12" method="POST">
    </#if>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    产品类别名称:
                    <span class="required">*</span>
                </label>
            </div>
            <div class="form-input col-md-8">
                <input type="text" id="name" name="name" data-trigger="change" data-required="true"
                       class="parsley-validated" value="${((type.name)!'')?xhtml}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    产品赎回模式:
                    <span class="required">*</span>
                </label>
            </div>
            <div class="form-checkbox-radio col-md-10">
                <input type="radio" class="custom-radio" value="EXPIRE_REDEEM" name="redeem" id="redeem"
                       <#if !type||type.redeem == "EXPIRE_REDEEM">checked</#if>     />
                <label for="">到期赎回</label>
                <input type="radio" class="custom-radio" value="EXPIRE_KEEP" name="redeem" id="redeem"
                       <#if type.redeem == "EXPIRE_KEEP">checked</#if>/>
                <label for="">到期续买</label>
            </div>
        </div>
        <div class="form-row" id="keepParams">
            <div class="form-label col-md-2">
                <label for="">
                    续买参数:
                </label>
            </div>
            <div class="form-label col-md-1">
                <label for="">
                    增率:
                </label>
            </div>
            <div class="form-input col-md-2">
                <input type="text" id="increaseRate" name="increaseRate" data-trigger="change"
                       class="parsley-validated" value="${increaseRate}">
            </div>
            <div class="col-md-1">%</div>
            <div class="form-label col-md-1">
                <label for="">
                    最高:
                </label>
            </div>
            <div class="form-input col-md-2">
                <input type="text" id="maxRate" name="maxRate" data-trigger="change"
                       class="parsley-validated" value="${maxRate}">
            </div>
            <div class="col-md-1">%</div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    内容模版:
                </label>
            </div>
            <div class="form-input col-md-4">
                <select id="templateSelect" name="templateId">
                    <option value="">空模板</option>
                <#list list as template>
                    <option value="${template.id}"
                            <#if type.templateId==template.id>selected</#if>>${template.name}[${template.remark}]</option>
                </#list>
                </select>
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    App内容模版:
                </label>
            </div>
            <div class="form-input col-md-4">
                <select id="templateSelect" name="appTemplateId">
                    <option value="">空模板</option>
                <#list list as template>
                    <option value="${template.id}"
                            <#if type.appTemplateId==template.id>selected</#if>>${template.name}[${template.remark}]</option>
                </#list>
                </select>
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    安全保障模版:
                </label>
            </div>
            <div class="form-input col-md-4">
                <select id="templateSelect" name="insuranceTemplateId">
                    <option value="">空模板</option>
                <#list list as template>
                    <option value="${template.id}"
                            <#if type.insuranceTemplateId==template.id>selected</#if>>${template.name}[${template.remark}]</option>
                </#list>
                </select>
            </div>
        </div>

        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    协议模版:
                </label>
            </div>
            <div class="form-input col-md-4">
                <select id="templateSelect" name="protocols" multiple="" class="chosen-select">
                    <option value="">空模板</option>
                <#list list as template>
                    <option value="${template.id}" <#list type.protocols?split(",") as pid><#if pid==template.id>selected</#if></#list>>${template.name}[${template.remark}]</option>
                </#list>
                </select>
            </div>
        </div>

        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    类别:
                </label>
            </div>
            <div class="form-input col-md-4">
                <select id="templateSelect" name="category" class="chosen-select">
                    <option value="WEEK" <#if type.category == "WEEK">selected</#if>>一周</option>
                    <option value="MONTH" <#if type.category == "MONTH">selected</#if>>一月</option>
                    <option value="QUARTER" <#if type.category == "QUARTER">selected</#if>>一季度</option>
                </select>
            </div>
        </div>

        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    自定义字段:
                </label>
            </div>
            <div class="form-label col-md-2">
                <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" onclick="addField(this)"
                   title="" href="#s">
                    <i class="glyph-icon icon-plus"></i>
                </a>
            </div>

        </div>


    <#list fields as field>
        <div class="form-row">
            <input type="hidden" value="${field.id}"/>

            <div class="form-label col-md-2">
            </div>

            <div class="form-input col-md-2">
                <input type="text" placeholder="字段名称" id="name" name="fieldList[${field_index}].name"
                       data-trigger="change"
                       class="parsley-validated" value="${((field.name)!'')?xhtml}">
            </div>
            <div class="form-input col-md-2">
                <input type="text" placeholder="编码" id="code" name="fieldList[${field_index}].code"
                       data-trigger="change"
                       class="parsley-validated" value="${((field.code)!'')?xhtml}">
            </div>
            <div class="form-input col-md-2">
                <select name="fieldList[${field_index}].type">
                    <option value="文字" <#if field.type == "文字">selected="selected"</#if>>文字</option>
                    <option value="图片" <#if field.type == "图片">selected="selected"</#if>>图片</option>
                    <option value="数值" <#if field.type == "数值">selected="selected"</#if>>数值</option>
                </select>
            </div>
            <div class="form-input col-md-1">
                <select name="fieldList[${field_index}].required" value="">
                    <#if field.required == "REQUIRED">
                        <option value="REQUIRED" selected="selected">必填</option>
                        <option value="NOT_REQUIRED">可选</option>
                    <#elseif field.required == "NOT_REQUIRED">
                        <option value="REQUIRED">必填</option>
                        <option value="NOT_REQUIRED" selected="selected">可选</option>
                    </#if>
                </select>
            </div>
            <div class="form-input col-md-1">
                <select name="fieldList[${field_index}].css" value="">
                    <option value="${field.css}" selected="selected">${field.css}</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                </select>
            </div>
            <div class="form-input col-md-1">
                <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" onclick="removeField(this)"
                   title="" href="#s">
                    <i class="glyph-icon icon-minus"></i>
                </a>
            </div>

        </div>
    </#list>
    </form>
    </form>
    </div>

    <div class="divider"></div>
    <div class="form-row">
        <input type="hidden" name="superhidden" id="superhidden">
        <div class="form-input col-md-10 col-md-offset-2">
            <a <#if check>href="/product/type/list" <#else> href="javascript:;" </#if> class="btn medium primary-bg radius-all-4 col-md-2" id="btnSubmit">
                <#if check>
                    返回
                <#else>
                    提交
                </#if>

            </a>
        </div>
    </div>
</div>


<script>
<#if fields>
	var listSize=${fields?size};
	<#else >
	var listSize=0;
</#if>
<#if check>
    var check = true;
<#else>

    var check = false;
</#if>


    function addField(element) {
        var html = $.parseHTML(
                '<div class="form-row">' +
                '<div class="form-input col-md-2">'+
                '</div>'+
                '<div class="form-input col-md-2">' +
                '<input type="text" placeholder="字段名称" id="name" name="fieldList['+listSize+'].name" data-trigger="change" data-required="true" class="parsley-validated" value="${(product.name)?xhtml}">' +
                '</div>' +
                '<div class="form-input col-md-2">' +
                '<input type="text" placeholder="编码" id="code" name="fieldList['+listSize+'].code" data-trigger="change" data-required="true" class="parsley-validated" value="${(product.name)?xhtml}">' +
                '</div>' +
                '<div class="form-input col-md-2">' +
                '<select name="fieldList['+listSize+'].type">'+
                        '<option value="文字">文字</option>'+
                        '<option value="图片">图片</option>'+
                        '<option value="数值">数值</option>'+
                '</select>'+
                '</div>' +
                '<div class="form-input col-md-1">' +
                '<select name="fieldList['+listSize+'].required" value="">'+
                    '<option value="REQUIRED" selected="selected">必填</option>'+
                    '<option value="NOT_REQUIRED">可选</option>'+
                '</select>'+
                '</div>' +
                '<div class="form-input col-md-1">'+
                    '<select name="fieldList['+listSize+'].css" value="">'+
                        '<option value="2">占位</option>'+
                        '<option value="1">1</option>'+
                        '<option value="2">2</option>'+
                        '<option value="3">3</option>'+
                        '<option value="4">4</option>'+
                        '<option value="5">5</option>'+
                        '<option value="6">6</option>'+
                        '<option value="7">7</option>'+
                        '<option value="8">8</option>'+
                    '</select>'+
                '</div>'+
                '<div class="form-input col-md-1">' +
                '<a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" onclick="removeField(this)" title="" href="#s"><i class="glyph-icon icon-minus"></i></a>' +
                '</div>');
        $("form").append(html);
        listSize++;

        return;
    }

    function removeField(ele){
    	$(ele).parent().parent().remove()
    	listSize--;
    }

    //TODO
    function checkRequired() {
        var require = false;
        require = $("#name").getAttribute("data-required");
        if (require) {
            if ($("#name").val() == null) {

            }
        }
    }
$(function(){
	$("input[name=redeem]").bind("click",function(){
		if($("input[name=redeem]:checked").val()=="EXPIRE_REDEEM"){
			$("#keepParams").hide();
		}else{
			$("#keepParams").show();
		}
	});
	
	if($("input[name=redeem]:checked").val()=="EXPIRE_REDEEM"){
		$("#keepParams").hide();
	}

	$("#btnSubmit").click(function(){
        if(!check){
            $('#demo-form1').parsley('validate');
            $('#demo-form1').trigger('submit');
        }

	});
});
</script>